<template>
  <view class="template-cash">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
        <text class='icon tn-icon-left'></text>
      </view>
      <!-- 添加右侧充值明细按钮 -->
      <view slot="right" class='tn-custom-nav-bar__right' @click="showDetail">
        <text class='icon tn-icon-calendar'></text>
      </view>
    </tn-nav-bar>

    <!-- 页面内容 -->
    <view class="cash-content" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
      <!-- 余额展示 -->
      <view class="balance-card tn-shadow-blur">
        <view class="balance-content">
          <view class="balance-title tn-color-gray">当前余粮（欢币）</view>
          <view class="balance-amount">
            <!-- <text class="currency">¥</text> -->
            <text class="amount">1234</text>
          </view>
        </view>
      </view>

      <!-- 快捷充值选项 -->
      <view class="recharge-options">
        <view class="section-title">快捷充值</view>
        <view class="options-grid">
          <view 
            v-for="(item, index) in rechargeOptions" 
            :key="index"
            class="option-item"
            :class="{ 'active': selectedOption === index }"
            @click="selectOption(index)"
          >
            <view class="amount">¥{{ item.amount }}</view>
            <view class="description" v-if="item.bonus">送{{ item.bonus }}元</view>
          </view>
        </view>
        
        <!-- 充值按钮 -->
        <view class="recharge-button-wrap">
          <button class="recharge-button tn-cool-bg-color-1" @click="handleRecharge">
            立即充值
          </button>
        </view>   
      </view>

      <!-- 充值说明 -->
      <view class="recharge-notice">
        <view class="notice-title">充值说明</view>
        <view class="notice-item">1. 充值金额将实时到账</view>
        <view class="notice-item">2. 赠送金额仅限平台使用</view>
        <view class="notice-item">3. 充值金额不可提现</view>
        <view class="notice-item">4. 1元=1欢币</view>
        <!-- 添加充值协议链接 -->
        <view class="protocol-link tn-flex tn-flex-row-center tn-margin-top-sm" @click="goToProtocol">
          <text class="tn-color-gray">点击充值即表示同意</text>
          <text class="link-text">《充值服务协议》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Cash',
  data() {
    return {
      selectedOption: -1,
      rechargeOptions: [
        { amount: 50, bonus: 5 },
        { amount: 100, bonus: 15 },
        { amount: 200, bonus: 35 },
        { amount: 500, bonus: 100 },
        { amount: 1000, bonus: 250 },
        { amount: 2000, bonus: 600 }
      ]
    }
  },
  computed: {
    vuex_custom_bar_height() {
      return uni.getSystemInfoSync().statusBarHeight + 45
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    showDetail() {
      uni.navigateTo({
        url: '/minePages/recharge/rechargeDetail'
      })
    },
    selectOption(index) {
      this.selectedOption = index
    },
    handleRecharge() {
      if (this.selectedOption === -1) {
        uni.showToast({
          title: '请选择充值金额',
          icon: 'none'
        })
        return
      }
      const amount = this.rechargeOptions[this.selectedOption].amount
      uni.showModal({
        title: '确认充值',
        content: `确定要充值${amount}元吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '充值功能开发中',
              icon: 'none'
            })
          }
        }
      })
    },
    goToProtocol() {
      uni.navigateTo({
        url: '/minePages/recharge/rechargeProtocol'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.template-cash {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.cash-content {
  padding: 30rpx;
}

.balance-card {
  margin-top: 20rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  margin-bottom: 40rpx;
  
  .balance-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .balance-title {
    font-size: 32rpx;
    margin-bottom: 30rpx;
    color: #666;
  }
  
  .balance-amount {
    text-align: center;
    
    .currency {
      font-size: 40rpx;
      margin-right: 10rpx;
      font-weight: bold;
    }
    
    .amount {
      font-size: 60rpx;
      font-weight: bold;
    }
  }
}

.recharge-options {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }

  .options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    margin-bottom: 40rpx;
  }

  .option-item {
    background-color: #f8f8f8;
    border-radius: 12rpx;
    padding: 20rpx;
    text-align: center;
    border: 2rpx solid transparent;
    
    &.active {
      background-color: rgba(255, 129, 85, 0.1);
      border-color: #FF8155;
    }

    .amount {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
    }

    .description {
      font-size: 24rpx;
      color: #FF8155;
    }
  }
}

.recharge-button-wrap {
  padding: 20rpx 40rpx;
}

.recharge-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  font-size: 32rpx;
  color: #FFFFFF;
  border: none;
  
  &:active {
    transform: scale(0.98);
  }
}

.recharge-notice {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;

  .notice-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .notice-item {
    font-size: 24rpx;
    color: #666;
    line-height: 1.8;
  }

  .protocol-link {
    margin-top: 20rpx;
    font-size: 24rpx;
    
    .link-text {
      color: #FF8155;
      margin-left: 8rpx;
    }
  }
}

/* 导航栏返回按钮样式 */
.tn-custom-nav-bar__back {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 30rpx;
  
  .icon {
    font-size: 46rpx;
    color: #000000;
    
    &:active {
      transform: scale(0.92);
    }
  }
}

.tn-custom-nav-bar__right {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 30rpx;
  
  .icon {
    font-size: 46rpx;
    color: #000000;
    
    &:active {
      transform: scale(0.92);
    }
  }
}
</style> 